<template>
  <view class="Looking_for_a_job">
    <view class="header">
      <image class="img" src="@/static/img/index/header.png"></image>
      <view class="tabs" :style="{ marginTop: menuButtonTop + 'px' }">
        <view
          class="tab-item"
          v-for="(item, index) in tabsList"
          :key="index"
          :class="activeTab == item.index ? 'tab-item-active' : ''"
          @tap="tabsClick(item)"
        >
          <text>{{ item.name }}</text>
          <view class="tab-line">
            <image
              class="_line-img"
              src="@/static/img/chat/icon-nav-bg.png"
            ></image>
          </view>
        </view>
      </view>
      <view class="operation">
        <view class="input">
          <u-icon name="search" color="#BCBCBC" size="60"></u-icon>
          <up-input
            class="input"
            shape="circle"
            border="none"
            clearable
            placeholder="账号"
            placeholderStyle="color:#BDBDBD"
          ></up-input>
        </view>
        <view class="option" @tap="openOptionMenu">
          <u-icon name="plus-circle" color="#ffffff" size="60"></u-icon>

          <up-transition :show="optionMenuShow">
            <view class="transition option-menu">
              <image
                class="option-menu-bg"
                src="@/static/img/contacts/option-bg.png"
              ></image>
              <view class="option-menu-content">
                <view class="_content">
                  <view class="_menu-item" @tap="optionMenuCheck(1)">
                    <image
                      class="_item-icon"
                      src="@/static/img/contacts/option-group-chat-icon.png"
                    ></image>
                    <view class="_item-content"><text>发起群聊</text></view>
                  </view>
                  <view class="_menu-item" @tap="optionMenuCheck(2)">
                    <image
                      class="_item-icon"
                      src="@/static/img/contacts/option-add-friend-icon.png"
                    ></image>
                    <view class="_item-content"><text>添加朋友</text></view>
                  </view>
                </view>
              </view>
            </view>
          </up-transition>
        </view>
      </view>
    </view>
    <view class="main">
      <view class="main-box">
        <FriendsList
          class="_box-list"
          :mainHeight="mainHeight"
          v-if="activeTab == 1"
        />
        <NewsFriends v-if="activeTab == 2" />
        <AddFriend v-if="activeTab == 3" />
      </view>
    </view>
  </view>
</template>

<script setup>
import AddFriend from "./components/AddFriend.vue";
import { ref, reactive, onMounted, getCurrentInstance } from "vue";
import FriendsList from "./components/FriendsList.vue";
import NewsFriends from "./components/NewsFriends.vue";

// console.log(uni.getSystemInfoSync());
// const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// console.log("menuButtonInfo", menuButtonInfo);
const menuButtonTop = ref(0);
menuButtonTop.value = menuButtonInfo.top - 6;

// 创建tabs响应式数据
const tabsList = reactive([
  { index: 1, name: "好友" },
  { index: 2, name: "新好友" },
  { index: 3, name: "加好友" },
]);

// 定义选中tab
const activeTab = ref(1);

// 定义tabs方法
function tabsClick(item) {
  // console.log(item);
  activeTab.value = item.index;
}

// 定义搜索框右侧操作按钮
const optionMenuShow = ref(false);
function openOptionMenu() {
  if (optionMenuShow.value) {
    optionMenuShow.value = false;
  } else {
    optionMenuShow.value = true;
  }
}

// 定义操作窗事件
function optionMenuCheck(params) {
  console.log("optionMenuCheck", params);
  if (params == 1) {
    // 发起群聊
  } else {
    // 添加朋友
  }
}

// 获取页面实例对象
const instance = getCurrentInstance();

// 获取main元素的高度
const mainHeight = ref(0);
onMounted(() => {
  const query = uni.createSelectorQuery().in(instance);
  query
    .select(".main")
    .boundingClientRect((data) => {
      console.log("得到布局位置信息", data);
      // console.log("信息的高度", data.height);
      mainHeight.value = data.height;
      // console.log("mainHeight", mainHeight.value);
    })
    .exec();
});
</script>

<style lang="scss" scoped>
.Looking_for_a_job {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .header {
    width: 750rpx;
    height: 452rpx;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(
      180deg,
      #005eff 0%,
      #00cbff 100%,
      rgba(0, 170, 255, 0.85) 100%
    );

    .img {
      width: 750rpx;
      height: 452rpx;
      position: absolute;
      inset: 0;
      z-index: 0;
    }

    .tabs {
      width: 750rpx;
      height: 88rpx;
      // margin-top: 88rpx;
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      padding-left: 34rpx;

      .tab-item {
        font-size: 40rpx;
        font-weight: 500;
        color: #ffffff;
        position: relative;
        padding: 0 30rpx;
        box-sizing: border-box;
        transition: all 0.3s;

        .tab-line {
          width: 46rpx;
          height: 14rpx;
          min-width: 46rpx;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
          margin-bottom: -14rpx;
          display: flex;
          transform: scale(0);
          transition: all 0.3s;

          ._line-img {
            width: 100%;
            height: 100%;
          }
        }
      }

      .tab-item-active {
        font-size: 46rpx;
        transition: all 0.3s;

        .tab-line {
          transform: scale(1);
          transition: all 0.3s;
        }
      }
    }

    .operation {
      width: 100%;
      padding: 0 20rpx;
      box-sizing: border-box;
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: center;
      margin-top: 34rpx;

      .input {
        width: 628rpx;
        height: 80rpx;
        background-color: #fff;
        position: relative;
        z-index: 1;
        border-radius: 80rpx;
        align-items: center;
        padding: 0 24rpx;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
      }
    }

    .option {
      width: 60rpx;
      height: 60rpx;
      position: relative;
      z-index: 2;

      .option-menu {
        width: 238rpx;
        height: 194rpx;
        margin-top: 0rpx;
        margin-left: -178rpx;
        position: relative;

        .option-menu-bg {
          // width: 100%;
          width: 261rpx;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
        }

        .option-menu-content {
          position: absolute;
          top: 29rpx;
          left: 26rpx;
          width: 209rpx;
          height: 138rpx;

          ._content {
            width: 100%;
            margin-top: 10rpx;
          }

          ._menu-item {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: nowrap;
            margin-top: 18rpx;

            ._item-icon {
              width: 44rpx;
              height: 42rpx;
              margin-left: 22rpx;
            }

            ._item-content {
              width: calc(100% - 80rpx);
              font-weight: 400;
              font-size: 28rpx;
              color: #ffffff;
              line-height: 40rpx;
              position: relative;

              ::after {
                content: "";
                width: 100%;
                height: 1px;
                background-color: rgba(255, 255, 255, 0.4);
                position: absolute;
                left: 0;
                bottom: -10rpx;
              }
            }
          }

          ._menu-item:last-child {
            ._item-content {
              ::after {
                display: none;
              }
            }
          }
        }
      }
    }
  }

  .main {
    width: 750rpx;
    // min-height: calc(100% - 346rpx);
    min-height: calc(100vh - 330rpx);
    position: absolute;
    z-index: 1;
    background-color: #fff;
    bottom: 0;
    border-radius: 32rpx 32rpx 0 0;
    overflow-y: scroll;

    .main-box {
      width: 100%;
      height: 100%;
      position: relative;

      ._box-list {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;

        ::v-deep .friends-list {
          .u-index-list {
            .u-index-list__letter {
              top: 0px !important;
              left: 0;
              bottom: 0;
              margin: auto;
              margin-right: 0;
              width: 56rpx;
              height: max-content;
            }
          }

          scroll-view {
            height: 100% !important;
            // max-height: 100% !important;
            // max-height: 1366px !important;
            // overflow: auto;
          }
        }
      }
    }
  }
}
</style>
